<!-- 
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved. 
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com 
-->

<!DOCTYPE html>
<html>

<!-- <base class="_dcdev_preset_" href="https://res.dcdev.net/" /> -->

<head>
    <!------ 以下内容不要动 --------------------------------------------------------->
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 数控开发基础样式库（已作一定的自适应，button/label/input/textarea等设置了默认样式） -->
    <link class="_dcdev_preset_" type="text/css" rel="stylesheet"
        href="https://res.dcdev.net/dcdev/v1.0.6/assets/css/dcdevui.css">
    <!-- 页面标题 -->
    <title>数控开发 · 预览代码片段</title> <!-- 桌面端浏览器及收藏夹图标 -->
    <link class="_dcdev_preset_" rel="icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <link class="_dcdev_preset_" rel="shortcut icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <!------ 以上内容不要动 --------------------------------------------------------->
</head>

<body>
    <!------ dcdev_body_container不要删除,内容在 body start 及 body end 中间书写  ------>
    <div class="dcdev-body-container" id="dcdev_body_container" style="display: none;">
        <!-- body start -->

        <div id="aaa" style="width: 100%;"></div>


        <!-- body end -->
    </div>
</body>

<!------ 以下内容不要变动 --------------------------------------------------------->
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 不授权模式， 仅初始化常用变量及函数 -->
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/init.js" id="initClass"
    authorize_mode="none" console_mode=""></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/ui.js" id="ui_class"
    xhr_show_loading=1></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/func/import_dev_kit.js"></script>
<script class="_dcdev_preset_">
    // 代码片段描述
    code_part_desc = "render_somthing的demo";
    code_part_id = "";
</script>
<!------ 以上内容不要变动 --------------------------------------------------------->

<script>
    $("#aaa").load(
        "http://127.0.0.1:8080/lib/lib_of_front_end/dcdev/v1.0.6/assets/html/render_table.html",
        function () {
            data = {
                id: "aaa",
                // 表格的数据（数组）
                table_data: null,
                // table的配置
                table_config: {
                    style: "border-style: solid;border-width: 1px;border-color:lightgray;",
                },
                // 每个tr的配置
                tr_config: {
                    class: "",
                    style: "height:36px",
                },
                // 每个td的配置
                td_config: [{
                        td_key: `headimgurl`,
                        td_class: ``,
                        td_style: `padding-left:10px;width:10%;border: none;`,
                        td_html: `<img src="{td_key}" style="width: 26px;border-radius: 80px;">`,
                    },
                    {
                        td_key: `name`,
                        td_func: {
                            type: "format_search_keyword",
                            color: "red",
                        },
                        td_class: ``,
                        td_style: `padding-left:10px;width:90%;border: none;`,
                        td_html: `<div style="color:gray;">{td_key}</div>`,
                    }, {
                        td_key: `project_owner`,
                        td_func: {
                            type: "format_search_keyword",
                            color: "red",
                        },
                        td_class: ``,
                        td_style: `padding-left:10px;width:90%;border: none;`,
                        td_html: `<div style="color:gray;">{td_key}</div>`,
                    },
                    {
                        td_key: `project_update_time`,
                        td_func: {
                            type: "format_search_keyword",
                            color: "red",
                        },
                        td_class: ``,
                        td_style: `padding-left:10px;width:90%;border: none;`,
                        td_html: `<div style="color:gray;">{td_key}</div>`,
                    },
                ],
                // 请求及分页的配置
                page_config: {
                    require: {
                        url: "https://api.dcdev.net/v1.0.1/project/get_public_list.php",
                        data: {
                            __PAGE_NUMBER: 1,
                            __PAGE_COUNT: 10,
                        },
                        method: "post",
                        dataType: "json",
                        require_data_param: "data",
                        page_number_param: "__PAGE_NUMBER",
                        page_count_param: "__PAGE_COUNT",
                        data_count_param: "__COUNT",
                        search_keyword_param: "keyword",
                    },
                    // 是否开启分页
                    pages: true,
                    // 默认显示行数
                    limit: 10,
                    // 显示行数选择框
                    limits: [5, 10, 20],
                },
            };
            new render_table(data)
        }
    );
</script>

</html>